<template>
  <div class="optimal" @click="$emit('goods')">
    <div id="optimalLeft" class="optimalLeft">
      <img :src="info.shopImg" />
    </div>
    <ul class="optimalRight">
      <li class="rightTop">
        {{ info.shopName }}<span class="distance">{{ info.distance }}km</span>
      </li>
      <li class="rightMiddle">
        <span class="first-score">
          <img
            v-for="item in Math.ceil(info.shopStar)"
            :key="item.key"
            src="~assets/img/star_fill.png"
          /><img
            v-for="item in 5 - Math.ceil(info.shopStar)"
            :key="item.key"
            src="~assets/img/star.png"
          />
        </span>
        <span>{{ info.shopStar }}</span>
        <span class="middleNum">月销{{ info.shopSellNum }}单</span>
        <span class="middleTime"> {{ info.deliveryTime }}分钟 </span>
      </li>
      <li class="rightBottom">
        <span>起送{{ info.shopUpSend }}元</span>
        <span class="stand"></span>
        <span>配送费约{{ info.shopDelivery }}元</span>
        <span class="bottomTag">
          <span v-if="info.mango" class="tagLeft">蜂鸟专送</span>
          <span v-if="info.timely" class="tagRight">准时达</span>
        </span>
      </li>
      <li v-if="info.shopActivityList.length > 0" class="activity">
        <span class="tag-border activitySecond1">{{
          info.shopActivityList[0].substr(0, 1)
        }}</span>
        <span>{{ info.shopActivityList[0] }}</span>
        <span
          v-show="info.shopActivityList.length > 2"
          class="activityNum"
          @click.stop="moreActivity = !moreActivity"
          >{{ info.shopActivityList.length }}个活动&nbsp;
          <img v-show="moreActivity" src="~assets/img/bottom.png" />
          <img v-show="!moreActivity" src="~assets/img/top.png" />
        </span>
      </li>
      <li v-if="info.shopActivityList.length > 1" class="activity">
        <span class="tag-border activitySecond2">{{
          info.shopActivityList[1].substr(0, 1)
        }}</span>
        <span>{{ info.shopActivityList[1] }}</span>
      </li>
      <li
        v-for="(item, index) in info.shopActivityList"
        v-show="index > 1 && !moreActivity && info.shopActivityList.length > 2"
        :key="item.key"
        class="activity"
      >
        <span class="tag-border" :class="moreColor(index)">{{
          item.substr(0, 1)
        }}</span>
        <span>{{ item }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      moreActivity: true // 下拉标识
    }
  },
  methods: {
    moreColor(index) {
      switch (index) {
        case 2:
          return {
            activitySecond3: true
          }
        case 3:
          return {
            activitySecond4: true
          }
        case 4:
          return {
            activitySecond5: true
          }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.optimal {
  display inline-block
  width 100%
  background #FFF
  padding-bottom 6px
  border-bottom 1px solid #dcdcdc
}

.optimalLeft {
  float left
  width 66px
  height 66px
  margin-left 10px
  margin-top 12px
  img {
    height 100%
    width 100%
    border-radius 2px
  }
}

.optimalRight {
  width 74%
  float left
  margin-left 10px
  margin-top 12px
  text-align left
}

.rightTop {
  width 100%
  height 22px
  line-height 22px
  color #000
  font-size 15px
}

.distance {
  float right
  font-size 14px
  color #999
}

.rightMiddle {
  width 100%
  height 22px
  line-height 22px
  color #999
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
}

.first-score {
  img {
    width 10px
    height 10px
    margin-right 2px
  }
}

.middleNum {
  margin-left 4px
}

.middleTime {
  float right
  margin-right 6px
}

.stand {
  display inline-block
  width 1px
  height 10px
  background #bbb
}

.rightBottom {
  width 100%
  height 22px
  line-height 22px
  color #999
  margin-top 2px
}

.bottomTag {
  float right
  margin-right 6px
}

.tagLeft {
  width 45px
  height 18px
  line-height 16px
  text-align center
  border-radius 2px
  border 1px solid #01ad65
  color #01ad65
}

.tagRight {
  width 50px
  height 18px
  line-height 16px
  text-align center
  border-radius 2px
  color #fff
  border 1px solid #01ad65
  background #01ad65
}

.activity {
  height 22px
  font-size 8px
  margin-top 2px
  color #666
}

.activityNum {
  float right
  width 68px
  height 22px
  line-height 22px
  margin-right 6px
  img {
    width 10px
    height 5.5px
  }
}

.tag-border {
  border-radius 2px
  color #fff
  margin-right 4px
}

.activitySecond1 {
  background #1fad65
}

.activitySecond2 {
  background #3561ad
}

.activitySecond3 {
  background #2d9cff
}

.activitySecond4 {
  background #E6A23C
}

.activitySecond5 {
  background #a1e642
}
</style>
